import Point from '../utils/point';
import RecordArray from '../utils/recordArray';
import {
    _POINT_ACTION,
    _SET_COLOR_ACTION,
    _SET_STOKE_SIZE
} from './constant';

// const drawer = function(){
//     let self = this;
//     self.canvas = null;
//     self.width = self.height = 0;
// }
// export default drawer;
export default class drawer {
    constructor(canvasId) {
        this.canvas = wx.createCanvasContext(canvasId);
        this.width = this.height = 0;
        this.ctx = wx.createCanvasContext(canvasId);
        this.mouseDown = false;
        this.recordings = new Array();
        this.lastMouseX = this.lastMouseY = -1;
        this.bgColor = "rgb(255,255,255)";
        this.currentLineWidth = 20;
        this.drawingColor = "rgb(0,0,0)";
        this.currentStep = 0;
        this.prevStep = 0;
        this.recordArray = null;

    }
    setRecordings(recordings){
        this.recordings = recordings;
    }
    prev() {

        this.drawingColor = "rgb(255,255,255)";

        this.playRecording(this.prevStep);

        this.currentStep = this.prevStep;
        if (this.prevStep > 0) {


            this.prevStep--;
        }
    }
    next() {
        this.drawingColor = "rgb(255,0,0)";

        this.playRecording(this.currentStep);
        this.prevStep = this.currentStep;
        if (this.currentStep < (this.recordings.length - 2)) {

            this.currentStep++;
        }
    }
    drawImage(src) {

        this.ctx.drawImage(
            src, 0, 0, '100%', '100%'
        )
        this.ctx.draw();
        this.startRecording();
    }
    saveRecord() {
        this.startRecording();
    }
    startRecording() {
        this.currentLineWidth = 20;
        this.drawingColor = "rgb(0,0,0)";

        this.recordArray = new RecordArray();
        if (this.recordings.length == 0) {
            this.recordings = new Array();
        }


        this.recordings.push(this.recordArray);
        // console.log(this.recordings);

    }

    stopRecording() {
        let rtn = [];
        for(let i=0;i<this.recordings.length;i++){
            if(this.recordings[i].getPoints().length>0){

                rtn.push(this.recordings[i].getPoints()) ;
            }
        }
        console.log(JSON.stringify(rtn));
        return rtn;
    }
    onMouseDown(e) {
        this.mouseDown = true;
        const x = e.touches[0].x;
        const y = e.touches[0].y;
        const action = new Point(x, y, 0);

        if (this.recordArray != null) {
            this.recordArray.setPoints(action);
        }
        this.drawAction(action,  false);
        this.lastMouseX = x;
        this.lastMouseY = y;

    }
    onMouseMove(e) {

        if (this.mouseDown) {

            const x = parseInt(Math.round(e.touches[0].x));
            const y = parseInt(Math.round(e.touches[0].y));

            const action = new Point(x, y, 1, this.lastMouseX, this.lastMouseY);

            if (this.recordArray != null) {
                this.recordArray.setPoints(action);
            }
            this.drawAction(action,  false);
            this.lastMouseX = x;
            this.lastMouseY = y;
        }
    }
    onMouseUp() {

        this.mouseDown = false;
        this.lastMouseX = -1;
        this.lastMouseY = -1;
    }
    drawAction(actionArg,  isReplay) {

        switch (actionArg.actionType) {
        case _POINT_ACTION:
            this.drawPoint(actionArg, isReplay);
            break;
        case _SET_COLOR_ACTION:

            this.drawingColor = actionArg.color;
            break;
        case _SET_STOKE_SIZE:
            this.currentLineWidth = actionArg.size;
            break;
        default:
            break;
        }
        
    }
    drawPoint(actionArg, isReplay) {
        const x = actionArg.x;
        const y = actionArg.y;

        switch (actionArg.type) {
        case 0: //moveto

            this.ctx.setLineCap('round');

            this.ctx.strokeStyle = this.drawingColor;
            this.ctx.lineWidth = this.currentLineWidth;
            this.ctx.beginPath();
            this.ctx.moveTo(x, y);

            break;
        case 1: //lineto             
            this.ctx.moveTo(actionArg.x1, actionArg.y1);
            this.ctx.lineTo(x, y);
            this.ctx.strokeStyle = this.drawingColor;
            this.ctx.stroke();

            if (!isReplay) {
                this.ctx.draw(true);
            }
            break;
        }
    }
    clearAll() {
        this.currentStep = 0;
        this.recordings = [];
        this.ctx.fillStyle = this.bgColor;

        this.ctx.fillRect(0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight * 0.9);
        this.ctx.draw();
    }
    clearCanvas() {
        this.ctx.fillStyle = this.bgColor;

        this.ctx.fillRect(0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight * 0.9);
        this.ctx.draw();
    }

    playRecording(currentIndex) {

        if (currentIndex == 0) {

            this.clearCanvas();
        }
        let pts = this.recordings[currentIndex].getPoints();
        this.drawActions(pts);


    }
    drawActions(actionArray) {
        for (let i = 0; i < actionArray.length; i++) {
            this.drawAction(actionArray[i]);
        }
        this.ctx.fill();
        this.ctx.draw(true);

    }
    print() {

        let context = this.ctx;

        context.setLineCap('round');
        context.setLineJoin('round');

    }
}